<template>
    <div class="navigation" :style="{ top: top, right: right }">
        <img
            class="navigation-bg"
            src="https://file.zhuyitai.com/feedback/202510/25/1d1aa64bf3571d71eede63ef128cae89.png"
            alt="进度"
            :style="{ height: bgHeight }"
        />
        <div class="navigation-item item1 active" @click="router.push('home')">
            <img
                src="https://yanfa-upload.oss-cn-zhangjiakou.aliyuncs.com/images/20251024/1761321079_wqbs_tpzb.png"
                alt=""
            />
            <p>{{ PageAssets.homeNavText }}</p>
        </div>
        <div class="navigation-item item2" @click="router.push('video-player')">
            <img
                src="https://cdn.jsdelivr.net.cn/gh/qdqqd/url-core@A/tc_uploads/52l04umlp3.png"
                alt=""
            />
            <p>{{ PageAssets.videoNavText }}</p>
        </div>
        <div class="navigation-item item3" @click="router.push('photo-album')">
            <img
                src="https://kycloud4.koyoo.cn/20251024b0424202510242352143250.png"
                alt=""
            />
            <p>{{ PageAssets.bookNavText }}</p>
        </div>
        <div class="navigation-item item4" @click="router.push('characters')">
            <img
                src="https://e3f49eaa46b57.cdn.sohucs.com/2025/10/24/23/52/MTAwMTE0XzE3NjEzMjExNTQwNDY=.png"
                alt=""
            />
            <p>{{ PageAssets.characterNavText }}</p>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getPageAssets } from "../pages/api.js";
const router = useRouter();
const PageAssets = ref("");
defineProps({
    top: {
        type: String,
        default: "0",
    },
    right: {
        type: String,
        default: "0",
    },
    bgHeight: {
        type: String,
        default: "45rem",
    },
});
onMounted(async () => {
    PageAssets.value = await getPageAssets();
});
</script>

<style lang="scss" scoped>
.navigation {
    position: absolute;
    transition: color 0.3s;
    z-index: 5;
}
.navigation-bg {
    transition: height 0.3s;
}
.navigation-item {
    color: #ffffff;
    text-shadow: 2px 2px 12px #000a, 0 0 2px #000, 0 0 4px #000;
    font-size: 1rem;
    font-weight: bold;
    pointer-events: auto;
    z-index: 10;
    img {
        display: block;
        margin: 0 auto;
    }
    p {
        width: 5rem;
        text-align: center;
    }
    &:hover {
        color: #ffea62;
        cursor: pointer;
        transform: scale(1.1);
        &::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -0.8rem;
            transform: translateX(-50%);
            width: 2.5rem;
            height: 2.5rem;
            background: url("https://zkaicc.huilan.com/aicc/api/aicc-file/miniofile/preViewPicture/aicc/qdqqd_1761320992282.png")
                center no-repeat;
            background-size: 100% 100%;
            z-index: -1;
            pointer-events: none;
        }
    }
}
.item1 {
    position: absolute;
    top: 4rem;
    right: -0.1rem;
}
.item2 {
    position: absolute;
    top: 13rem;
    right: 0rem;
}
.item3 {
    position: absolute;
    top: 21rem;
    right: 2rem;
    img {
        width: 2.5rem;
        height: 1.5rem;
    }
}
.item4 {
    position: absolute;
    top: 27rem;
    right: 0.5rem;
}
</style>